import React, {Component} from 'react';
import {Flex, Toast} from "antd-mobile";
import constant from "../../../util/common/constant";
import history from "../../../util/router/history";
import {dishTypeMap, oilyDegreeMap, seasonMap} from "../../../util-biz/biz-constant";

interface IDishItemProps {
  dish: {
    dishId: number;
    season: number;
    oilyDegree: number;
    dishType: number;
    dishName: string;
    dishDesc: string | null;
    dishPic: string | null;
    hotGrade: number;
  }
}

export default class DishItem extends Component<IDishItemProps, any> {

  render() {
    let { dish } = this.props;
    return (
      <div className="list-item-box" key={dish.dishId}>
        <div onClick={() => history.push(`/dish-detail/${dish.dishId}`)}>
          <Flex className="list-item">
            <Flex className="list-item-left" justify="center" align="center">
              {
                dish.dishPic ? <img src={constant.IMG_HOST + dish.dishPic} width="100%" height="100%" alt="dishImg"/> : <i className="dishfont middle-none-img">&#xe669;</i>
              }
            </Flex>

            <Flex className="list-item-right" direction="column" justify="between" align="start">
              <h3 className="text-h3 nowrap-text">{dish.dishName}</h3>
              <p className="text-brief nowrap-text">{dish.dishDesc}</p>
              <Flex className="item-line" justify="between">
                <Flex>
                  {this._getSeasonDesc(dish.season)}
                  {this._getOilyDegreeDesc(dish.oilyDegree)}
                  {this._getDishType(dish.dishType)}
                </Flex>
                <Flex className="hot-grade" onClick={(e) => {
                  if (e) {
                    e.stopPropagation();
                  }
                  Toast.success(`已经吃过${dish.hotGrade}次啦`, 1.5);
                }}>
                  <i className="dishfont">&#xe60f;</i>
                  <span>{this._getHotGrade(dish.hotGrade)}</span>
                </Flex>
              </Flex>
            </Flex>
          </Flex>
        </div>
      </div>
    );
  }

  /**
   * 获取季节
   * @private
   */
  _getSeasonDesc = (season: number) => {
    return <div className="my-tags season">
      <Flex><i className="dishfont">&#xe610;</i><span>{seasonMap[season]}</span></Flex>
    </div>;
  };

  /**
   * 获取油腻程度的描述
   * @private
   */
  _getOilyDegreeDesc = (oilyDegree: number) => {
    return <div className="my-tags oily-degree">
      <Flex><i className="dishfont">&#xe606;</i><span>{oilyDegreeMap[oilyDegree]}</span></Flex>
    </div>;
  };

  /**
   * 获取菜品种类的描述
   * @private
   */
  _getDishType = (dishType: number) => {
    return <div className="my-tags dish-type">
      <Flex><i className="dishfont">&#xe609;</i><span>{dishTypeMap[dishType]}</span></Flex>
    </div>;
  };

  /**
   * 获取热度
   * @private
   */
  _getHotGrade = (hotGrade: number) => {
    let hotStr;
    if (hotGrade > 10000) {
      hotStr = "破万!";
    } else if (hotGrade > 1000) {
      hotStr = `${Math.floor(hotGrade/1000)}千+`;
    } else if (hotGrade > 100) {
      hotStr = `${Math.floor(hotGrade/100)}百+`;
    } else {
      hotStr = hotGrade;
    }
    return hotStr;
  };

}
